<template>
  <el-dialog v-model="printVisible" top="1vh" width="750px" :before-close="() => updateVisible(false)">
    <template #header>
      <div class="dialog-head">
        打印员工信息
        <div v-print="printParamsRef" class="icon-print"><SvgIcon class="svg-print" name="svg-print"></SvgIcon></div>
      </div>
    </template>

    <div id="print-box">
      <div class="head">
        <div class="h-1">
          <div class="h-1-1"></div>
          <div class="h-1-2">赣州睿赛珂新能源材料技术有限公司</div>
        </div>
        <div class="h-2">员工入职登记表</div>
        <div class="h-3 mb5">
          <div class="h-3-1">
            <div>职位 :</div>
            <div class="border-bottom w100px"></div>
          </div>
          <div class="h-3-2">
            填表日期 :
            <div class="h-3-2-1">
              日期:
              <div class="border-bottom w50px"></div>
              年
              <div class="border-bottom w30px"></div>
              月
              <div class="border-bottom w30px"></div>
              日
            </div>
          </div>
        </div>
      </div>

      <div class="center-box">
        <div class="center-box-1">
          <div class="center-box-1-1">
            <div class="row-1">
              <div class="row-1-1 f15">
                <div class="f10">姓名</div>
                <div class="f15">{{ usePrintParams.name }}</div>
              </div>
              <div class="row-1-1 f10">
                <div class="f10">{{ usePrintParams.sex }}</div>
                <div class="f15">性别</div>
              </div>
              <div class="row-1-1 f10">
                <div class="f10">年龄</div>
                <div class="f15">{{ usePrintParams.sex }}</div>
              </div>
              <div class="row-1-1 f10">
                <div class="f10">籍贯</div>
                <div class="f15">{{ usePrintParams.nativePlace }}</div>
              </div>
            </div>

            <div class="row-1">
              <div class="row-1-1 f15">
                <div class="f10">曾用名</div>
                <div class="f15"></div>
              </div>
              <div class="row-1-1 f10">
                <div class="f10">民族</div>
                <div class="f15 beyond-hiding" :style="exceedStyle(usePrintParams.nation, 5)">
                  {{ usePrintParams.nation }}
                </div>
              </div>
              <div class="row-1-1 f10">
                <div class="f10">体重</div>
                <div class="f15">{{ usePrintParams.weight || '' }} kg</div>
              </div>
              <div class="row-1-1 f10">
                <div class="f10">身高</div>
                <div class="f15">{{ usePrintParams.height || '' }} cm</div>
              </div>
            </div>

            <div class="row-2">
              <div class="row-2-1 f15">
                <div class="f10">政治面貌</div>
                <div class="f15">{{ usePrintParams.politicsStatus }}</div>
              </div>
              <div class="row-2-1 f10">
                <div class="f10">学历</div>
                <div class="f15">{{ usePrintParams.education }}</div>
              </div>
              <div class="row-2-1 f20">
                <div class="f98">婚姻状况</div>
                <div class="no-right-border f98">{{ usePrintParams.marriageStatus }}</div>
              </div>
            </div>

            <div class="row-3">
              <div class="row-3-1">
                <div class="f73">身份证号码 / 外籍人员护照编号</div>
                <div class="f100 no-right-border">{{ usePrintParams.identityNumber }}</div>
              </div>
            </div>

            <div class="row-4">
              <div class="row-4-1 f11">
                <div>本人联系电话</div>
                <div>{{ usePrintParams.mobileNumber }}</div>
              </div>
              <div class="row-4-1 f15">
                <div class="f30">现住地址</div>
                <div class="no-right-border f100 beyond-hiding" :style="exceedStyle(usePrintParams.liveAddress, 15)">
                  {{ usePrintParams.liveAddress }}
                </div>
              </div>
            </div>

            <div class="row-5">
              <div class="row-5-1">
                <div class="f26">户口所在地</div>
                <div class="no-right-border f98 beyond-hiding">
                  {{ usePrintParams.identityAddress }}
                </div>
              </div>
            </div>

            <div class="row-6">
              <div class="row-6-1 f38">
                <div class="f50">紧急联系人</div>
                <div class="f55">{{ usePrintParams.urgencyName }}</div>
              </div>
              <div class="row-6-1 f43">
                <div class="f70">与你的关系</div>
                <div class="f60">{{ usePrintParams.urgencyRelation }}</div>
              </div>
              <div class="row-6-1 f56">
                <div class="f24">联系电话</div>
                <div class="f50 no-right-border">{{ usePrintParams.urgencyMobile }}</div>
              </div>
            </div>
          </div>
          <div class="center-box-1-2">照片</div>
        </div>
        <div class="center-box-2">
          <div class="family-title f5">家庭主要成员</div>
          <div class="family-info f100">
            <div class="row-1 no-right-border">
              <div class="f45">姓名</div>
              <div class="f30">关系</div>
              <div class="f100">单位或住址</div>
              <div class="f15">年龄</div>
              <div class="f60">职业</div>
              <div class="f45 no-right-border">联系电话</div>
            </div>
            <div class="row-2 no-right-border" v-for="(item, index) in usePrintParams.familyList" :key="index">
              <div class="f45">{{ item.familyName || '-' }}</div>
              <div class="f30">{{ item.familyRelation || '-' }}</div>
              <div class="f100">
                <span :style="exceedStyle(item.familyCompany, 15)">
                  {{ item.familyCompany || '-' }}
                </span>
              </div>
              <div class="f15">{{ item.familyAge || '-' }}</div>
              <div class="f60">{{ item.familyJob || '-' }}</div>
              <div class="f45 no-right-border">{{ item.familyMobile || '-' }}</div>
            </div>
          </div>
        </div>

        <div class="center-box-3">
          <div class="title f5">教育经历</div>
          <div class="info f100">
            <div class="row-1 no-right-border">
              <div class="f65">起止年月</div>
              <div class="f80">毕业学校</div>
              <div class="f45">主修专业</div>
              <div class="f30">是否毕业</div>
              <div class="f30 no-right-border">取得学历</div>
            </div>
            <div class="row-1 no-right-border" v-for="(item, index) in usePrintParams.studyList" :key="index">
              <div class="f65">{{ item.startAndEnd || '-' }}</div>
              <div class="f80">
                <span :style="exceedStyle(item.schoolName, 15)">
                  {{ item.schoolName || '-' }}
                </span>
              </div>

              <div class="f45">{{ item.major || '-' }}</div>
              <div class="f30">{{ item.flagGraduate || '-' }}</div>
              <div class="f30 no-right-border">{{ item.educationName || '-' }}</div>
            </div>
          </div>
        </div>

        <div class="center-box-3">
          <div class="title f5">工作经历</div>
          <div class="info f100">
            <div class="row-1 no-right-border">
              <div class="f59">起止年月</div>
              <div class="f58">工作单位名称</div>
              <div class="f30">担任职务</div>
              <div class="f35">离职原因</div>
              <div class="f45 no-right-border">证明人及联系电话</div>
            </div>
            <div class="row-1 no-right-border" v-for="(item, index) in usePrintParams.workList" :key="index">
              <div class="f59">{{ item.startAndEnd || '-' }}</div>
              <div class="f58">
                <span :style="exceedStyle(item.companyName, 15)">
                  {{ item.companyName || '-' }}
                </span>
              </div>
              <div class="f30">{{ item.job || '-' }}</div>
              <div class="f35">
                <span :style="exceedStyle(item.leaveReason, 6)"> {{ item.leaveReason || '-' }} </span>
              </div>
              <div class="f45 no-right-border">
                <span :style="exceedStyle(item.certifierAndCertifierMobile, 15)">
                  {{ item.certifierAndCertifierMobile || '-' }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <div class="center-box-4">
          <div class="title f20">应聘来源</div>
          <div class="info f100">
            <el-checkbox-group v-model="usePrintParams.recruitSource">
              <el-checkbox
                v-for="item in paramsGather.applicationSource"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <div v-if="item.value === '其他'" class="flex">
                  其他
                  <div class="border-bottom w60px">{{ usePrintParams.outerRecruitSourceOther }}</div>
                </div>
                <div class="w60px" v-else>{{ item.value }}</div>
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>

        <div class="center-box-5">
          <span>是否与本公司员工有关系:</span>
          <div class="border-bottom w40px">{{ usePrintParams.flagIntroduce }}</div>
          <span>,( 请举例姓名及关系, 姓名</span>
          <div class="border-bottom w100px">{{ usePrintParams.introduceName }}</div>
          <span>关系</span>
          <div class="border-bottom w100px">{{ usePrintParams.introduceRelation }}</div>
          )
        </div>

        <div class="center-box-6">
          <div class="f20 title">是否患有疾病</div>
          <div class="info f100">
            <el-checkbox-group v-model="usePrintParams.flagIllness" class="mr5">
              <el-checkbox v-for="item in paramsGather.yesOrNo" :key="item.value" :label="item.label" :value="item.value" />
            </el-checkbox-group>

            ( 遗传病、慢性病、其他病症
            <div class="ml10 border-bottom w100px">{{ usePrintParams.illnessName }}</div>
            )
          </div>
        </div>

        <div class="center-box-7">
          <div class="row-1">声明 :</div>
          <div class="row-2 mb10 mt10">
            本人对填写要求进行了认真、仔细的阅读，并确认所有填报内容正式、准确、完整、无任何虚假。如有虚假一经查实，本人愿接收公司处分。
          </div>
          <div class="row-3">
            <div>入职员工签名：</div>
            <div></div>

            <div class="flex">
              <div class="border-bottom w30px"></div>
              年
              <div class="border-bottom w30px"></div>
              月
              <div><div class="border-bottom w30px"></div></div>
              日
            </div>
          </div>
        </div>

        <div class="center-box-10">以下内容由公司填写</div>

        <div class="center-box-8">
          <div class="row-1">
            <span>1. 是否录用：</span>
            <el-checkbox label="是"> </el-checkbox>
            <el-checkbox label="否" class="mr15"> </el-checkbox>
            ( 理由:
            <div class="border-bottom w100px"></div>
            );
          </div>
          <div class="row-2">
            2.试用期
            <div class="border-bottom w30px"></div>
            个月;

            <div class="row-2-2">
              3. 正式入职日期:
              <div class="border-bottom w50px"></div>
              年
              <div class="border-bottom w30px"></div>
              月
              <div class="border-bottom w30px"></div>
              日
            </div>
          </div>

          <div class="row-3">
            <div>4.分配部门:</div>
            <div class="border-bottom w100px"></div>

            <div class="row-3-3">5. 职务/岗位:</div>
            <div class="border-bottom w100px"></div>
          </div>

          <div>备注:</div>
        </div>

        <div class="center-box-9">
          <div class="title f10">审核栏</div>
          <div class="info f100">
            <div class="row-1">
              <div>部门主管/经理</div>
              <div>副总/总监</div>
              <div>人力资源部</div>
              <div class="no-right-border">总经理</div>
            </div>
            <div class="row-2">
              <div></div>
              <div></div>
              <div></div>
              <div class="no-right-border"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="center-box-20">
        <div class="row-1">员工入职须知</div>

        <div class="row-2">
          <div class="row-2-1" :class="item.class" v-for="(item, index) of documentList" :key="index">
            <span class="mr8"> {{ index + 1 }}. </span>
            {{ item.value }}
          </div>
        </div>

        <div class="row-3">
          <div class="row-3-1">说明 :</div>
          <div class="row-3-2">
            本人承诺入职所提交的所有资料均为真实有效的,如有欺瞒或弄虚作假之行为,本人愿接受公司处分,行为严重者将解除劳动关系并不予支付补偿金。
            <div>以上内容我已阅读并已知悉。</div>
          </div>
        </div>

        <div class="row-4">
          <div class="row-4-1">
            员工签名 ( 指模 ) :
            <div class="border-bottom w100px"></div>
          </div>
          <div class="row-4-2">
            日期:
            <div class="border-bottom w50px"></div>
            年
            <div class="border-bottom w30px"></div>
            月
            <div class="border-bottom w30px"></div>
            日
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { dayjs } from 'element-plus';
import { documentList } from './documentList';
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  printParams: {
    type: Object,
    default: () => {
      return {};
    }
  }
});

const $emit = defineEmits(['update:visible']);

watch(
  () => props.visible && props.printParams,
  val => {
    if (val) {
      getDictionaryListByCodes('recruitSource').then(data => {
        Object.assign(paramsGather.value, {
          applicationSource: data
        });

        const { recruitSource, flagIllness, flagIntroduce } = val || {};

        Object.assign(usePrintParams.value, val, {
          recruitSource: [recruitSource],
          flagIllness: [flagIllness === 1 ? '是' : '否'],
          flagIntroduce: flagIntroduce === 1 ? '是' : '否'
        });

        const recruitSourceStatus = paramsGather.value.applicationSource.find(item => item.value === recruitSource) || {};
        if (!recruitSourceStatus) {
          usePrintParams.value.outerRecruitSourceOther = recruitSource;
          Object.assign(usePrintParams.value, {
            outerRecruitSourceOther: recruitSource,
            recruitSource: ['其他']
          });
        }

        getOtherInfo();
      });
    }
  }
);

const printParamsRef = ref({
  id: 'print-box',
  popTitle: '打印',
  openCallback() {
    updateVisible(false);
  }
});

let paramsGather = ref({
  // 招聘来源
  applicationSource: [],
  yesOrNo: statusYesOrNo
});

let usePrintParams = ref<any>({
  studyList: [],
  workList: [],
  familyList: []
});

let printVisible = computed(() => props.visible);

const updateVisible = (val: boolean) => {
  $emit('update:visible', val);
};

/**
 * 获取其他信息
 */
const getOtherInfo = async () => {
  const params = {
    rosterId: usePrintParams.value.id
  };
  const res = await promiseAllApi([familyInfoListById(params), workInfoList(params), educationInfoList(params)]);
  Object.assign(usePrintParams.value, {
    familyList: setOtherInfo(res[0], usePrintParams.value.familyList),
    workList: setOtherInfo(res[1], usePrintParams.value.workList),
    studyList: setOtherInfo(res[2], usePrintParams.value.studyList)
  });
};

/**
 * 超出文本样式
 */
const exceedStyle = (text: string, maxLength: number) => {
  const textLength = text;
  if (textLength?.length > maxLength) {
    return {
      fontSize: '12px',
      transform: 'scale(0.8)',
      width: '100%',
      marginLeft: '-14%'
    };
  }
};

const setOtherInfo = (data, origin) => {
  // 超过3条数据只获取后面的3条数据
  if (data.length > 3) {
    origin = data.slice(-3);
  } else {
    origin = data;
    for (let i = origin.length; i < 3; i++) {
      origin.push({});
    }
  }

  origin.forEach(item => {
    const { start, end, flagGraduate, certifier, certifierMobile } = item || {};
    if (start) {
      item.startAndEnd = `${dayjs(start).format(BasicKey.DATE_FORMAT.YYYY_MM_DD)}至${dayjs(end).format(
        BasicKey.DATE_FORMAT.YYYY_MM_DD
      )}`;
    }

    if (flagGraduate || flagGraduate === 0) {
      item.flagGraduate = flagGraduate === 1 ? '是' : '否';
    }

    if (certifierMobile || certifier) {
      item.certifierAndCertifierMobile = `${certifier}/${certifierMobile}`;
    }
  });
  return origin;
};
</script>

<style lang="scss" scoped src="./print.scss"></style>

<style lang="scss">
#print-box {
  .el-checkbox__inner::after {
    border-color: #000000 !important;
  }
  .el-checkbox__input.is-checked,
  .el-checkbox__inner {
    background-color: #ffffff !important;
    border-color: #000000 !important;
  }
  .el-checkbox__input + .el-checkbox__label {
    color: #000000 !important;
  }
}
</style>
